<template>
  <div>
    <h1 class="title">demo_2的标题</h1>
    <customTable
      :tableCols="tableCols"
      :tableData="tableData"
      :drawerEditForm="drawerEditForm"
      @deleteRow="deleteRow"
      @editRow="editRow"
    >
    </customTable>
  </div>
</template>

<script>
export default {
  name: "Demo_2",
  components: {},
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "张三",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎——2",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎-3",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      // 定义当前页面表格使用到的列
      tableCols: [
        {
          prop: "name",
          label: "姓名",
          width: 180,
        },
        {
          prop: "date",
          label: "日期",
          width: 100,
        },
        {
          prop: "address",
          label: "地址",
        },
      ],
      drawerEditForm: {
        formItems: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "地址",
            prop: "address",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    deleteRow({ row }) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 拿出id
          let { id } = row;
          // 根据id找到下标
          let findItemIndex = this.tableData.findIndex(
            (item) => item.id === id
          );
          // 根据下标删除数据
          this.tableData.splice(findItemIndex, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editRow({ row }) {
      // 拿出id
      let { id } = row;
      // 根据id找到下标
      let findItem = this.tableData.find((item) => item.id === id);
      Object.keys(row).forEach((key) => {
        findItem[key] = row[key];
      });
    },
  },
};
</script>

<style scoped>
.title {
  background-color: red !important;
}
</style>
